import PropsTypes from "prop-types";
import React from "react";
const Dialog = (props) => {
  let { title, content, children } = props;
  children = React.Children.toArray(children);
  return (
    <div className="dialog-box" style={{ width: "300px" }}>
      <div
        className="header"
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <h2>{title}</h2>
        <span>X</span>
      </div>
      <div className="main">{content}</div>
      {children.length > 0 && <div className="footer">{children}</div>}
    </div>
  );
};

/**
 * 属性规则校验
 */
Dialog.defaultProps = {
  title: "温馨提示",
};
Dialog.propTypes = {
  title: PropsTypes.string,
  content: PropsTypes.string.isRequired,
};

export default Dialog;
